<!--  商品的列表页-->
<template>
  <div class="goods-list">
    <!-- 头部 -->
    <GoodsHeader @changeFlagEvent="getFlagFun" />
    <!-- tab切换 -->
    <div class="tab-list">
      <ul>
        <li v-for="(tabsTitle, index) in tabsTitles" :key="tabsTitle.id" :class="activeIndex == index ? 'active' : ''"
          @click="changeIndexFun(index)">
          {{ tabsTitle.title }}
          <div class="icontip" v-if="tabsTitle.iconflag">
            <i class="iconfont icon-sanjiao" v-if="index == 0 ? showupFlag1 : showupFlag2"></i>
            <i class="iconfont icon-xiaosanjiaoup" v-else></i>
          </div>
        </li>
        <li>
          <i class="iconfont icon-shaixuan" @click="popUpFun"></i>
          筛选
        </li>
      </ul>
    </div>
    <!-- 引入当前的分类列表 -->
    <CategoryList :productDatas="productDatas" :listFlag="listFlag" />
    <!-- 筛选弹出层 -->
    <mt-popup v-model="popupVisible" position="right">
      <div class="pop-filter">
        <div class="price">
          <h4>价格区间</h4>
        </div>
        <div class="brand">
          <h4>品牌</h4>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { CategoryGoodsListApi } from '@/api/category'
import GoodsHeader from "./compontents/GoodsSearch.vue";
import CategoryList from "@/components/CategoryList.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { GoodsHeader, CategoryList },
  data() {
    //这里存放数据
    return {
      tabsTitles: [
        {
          id: 1,
          title: "综合",
          iconflag: true,
        },
        {
          id: 2,
          title: "新品",
          iconflag: false,
        },
        {
          id: 3,
          title: "销量",
          iconflag: false,
        },
        {
          id: 4,
          title: "价格",
          iconflag: true,
        },
      ],
      showupFlag1: true,
      showupFlag2: true,
      activeIndex: 0,
      productDatas: null,
      // productDatas: [
      //   {
      //     goods_id: 1140,
      //     goods_name:
      //       "摩飞（Morphyrichards）榨汁机 便携式充电迷你无线果汁机料理机随行杯MR9800 蓝色",
      //     shop_price: "219.00",
      //     goods_thumb:
      //       "https://img14.360buyimg.com/n1/s300x300_jfs/t1/107620/38/15906/368883/5eaf7085E3cc8d8ef/b2dac719f339e972.jpg",
      //     goods_label: [
      //       {
      //         id: 1,
      //         label_id: "1",
      //         label_name: "双十二",
      //         formated_label_image:
      //           "https://x.dscmall.cn/storage/data/goods/label/双十二2.png",
      //       },
      //       {
      //         id: 2,
      //         label_id: "2",
      //         goods_id: "1140",
      //         label_name: "商创精选",
      //         formated_label_image:
      //           "https://x.dscmall.cn/storage/data/goods/label/商创精选2.png",
      //       },
      //       {
      //         id: 3,
      //         label_id: "3",
      //         goods_id: "1140",
      //         label_name: "放心购",
      //         formated_label_image:
      //           "https://x.dscmall.cn/storage/data/goods/label/放心购2.png",
      //       },
      //     ],
      //     // 自营还是进店
      //     self_run: 0,
      //     // 销售量
      //     sales_volume: 2,
      //   },
      //   {
      //     goods_id: 913,
      //     goods_name:
      //       "猫人Xiaomi/小米 小米电视4A 55英寸 4k超高清智能网络电视机 50 60",
      //     shop_price: "2399.00",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201809/thumb_img/_thumb_P_1536532330615.jpg",
      //     goods_label: [],
      //     self_run: "",
      //     sales_volume: 10,
      //   },
      //   {
      //     goods_id: 1133,
      //     goods_name:
      //       "九阳（Joyoung）豆浆机1.3L免滤双层杯体304级不锈钢家用多功能搅拌机料理机DJ13B-D0",
      //     shop_price: "339.00",
      //     goods_thumb:
      //       "https://img14.360buyimg.com/n1/s300x300_jfs/t1/118091/1/15926/85759/5f44db1dEda332635/d6959ca23e523096.jpg",
      //     goods_label: [],
      //     self_run: "1",
      //     sales_volume: 10,
      //   },
      // ],
      listFlag: false,
      //   筛选的弹出属性
      popupVisible: false,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 切换逻辑
    changeIndexFun(index) {
      if (this.activeIndex == index) {
        if (index == 0) {
          this.showupFlag1 = !this.showupFlag1;
        } else if (index == 3) {
          this.showupFlag2 = !this.showupFlag2;
        }
      }
      //   当点击其他时,三角归为原来
      if (index != 0) {
        this.showupFlag1 = true;
      }
      if (index != 3) {
        this.showupFlag2 = true;
      }
      this.activeIndex = index;
    },
    getFlagFun(data) {
      this.listFlag = data;
    },
    // 弹出筛选框
    popUpFun() {
      this.popupVisible = true;
    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.$route.params);
    console.log(this.$route.query.title);
    // 题目:设置网页的title
    document.title = this.$route.query.title;
    CategoryGoodsListApi(this.$route.params).then(res => {
      console.log(res.data.data);
      // 设置初始值
      this.productDatas = res.data.data
    })
  },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，激活
  deactivated() { }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.tab-list {
  width: 100%;
  height: 3.55rem;
  background-color: #fff;
  border-top: 0.1rem solid #f1f1f1;
  font-size: 1.3rem;

  ul {
    display: flex;
    width: 98%;
    padding: 0 1%;
    justify-content: space-between;
    align-items: center;
    height: 3.55rem;

    li {
      width: 20%;
      display: flex;
      justify-content: center;

      .icon-shaixuan {
        font-size: 1.2rem;
      }
    }

    .active {
      color: rgb(228, 49, 36);
    }
  }
}

.mint-popup {
  width: 90%;
  height: 100%;
  background-color: #fff;
  border-radius: 1rem 0 0 1rem;

  .pop-filter {
    padding: 1rem;

    h4 {
      color: #000;
      font-size: 1.6rem;
      margin: 1rem 0;
    }
  }
}
</style>